<template>
	<div :style="{backgroundImage:'url('+data.url+')',height:data.heightUser+'px'}" class="box-backimage"
		v-show="data.isShow">
		<div style="text-align: center;">
			<label style="margin: auto;font-weight: 500;">标题：</label><input type="text" v-model="data.log.logTitle" />
		</div>

		<div style="text-align: center;height: 250px;">
			<label style="font-weight: 500;">正文：</label><textarea ws="10"
				style="width: 100%;height: 300px;text-align: left;" v-model="data.log.logContent" />
		</div>
		<div style="text-align: center;height: 165px;">
			<div>
				<label style="font-weight: 500;">图片：</label>
				<button @click="handleChoose"
					style="height: 25px;margin: auto;width: 25%;font-size: 12px;">选择图片</button>
			</div>
			<div style="width: 50%;height: 120px;margin: auto;"></div>
		</div>
		<div style="text-align: center;">
			<label style="font-weight: 500;">位置：</label>
			<input type="text" v-model="data.log.logLocation" />
		</div>
		<view class="sun-page">
			<button type="primary" style="background-color: #12C8B9;" @click="handMapping">增加日记</button>
		</view>
	</div>
</template>

<script>
	import {
		reactive,
		onMounted,
		onActivated,
		toRefs,
		ref
	} from 'vue'
	import {
		useAppStore
	} from '@/store/modules/app.js'
	export default {
		setup() {
			const userStore = useAppStore()
			let data = reactive({
				user: {
					userName: '',
					userAvator: '',
					userSignature: '',
					userEmail: ''
				},
				url: '',
				file: '',
				isShow: false,
				uploadFile: '',
				log: {
					userId: '',
					logTitle: '',
					logContent: '',
					logPicture: '',
					logLocation: ''
				},
				heightUser: '',
			});
			onMounted(() => {
				uni.getSystemInfo({
					success: function(res) {
						data.heightUser = res.windowHeight;
					}
				})
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.isShow = true
				data.url = userStore.url
				data.log.userId = userStore.userId
			})

			onActivated(() => {
				uni.getSystemInfo({
					success: function(res) {
						data.heightUser = res.windowHeight;
					}
				})
				if (userStore.userId === '') {
					uni.showToast({
						title: "未登录",
						icon: 'none',
						duration: 1500
					})
					return;
				}
				data.isShow = true
				data.url = userStore.url
				data.log.userId = userStore.userId
			})

			function handMapping() {
				uni.request({
					url: 'http://175.178.249.171:8092/api/log/add',
					method: 'POST',
					data: data.log,
					success: (res) => {
						uni.showToast({
							title: "添加日记成功",
							icon: 'none',
							duration: 1500
						})
						uni.switchTab({
							url: '/pages/listlog/listLog'
						})
					}
				})
			}

			function handleChoose() {
				uni.showLoading({
					title: '上传中'
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						data.uploadFile = res.tempFilePaths[0]
						uni.uploadFile({
							url: 'http://175.178.249.171:8092/api/file/log',
							filePath: data.uploadFile,
							name: 'file',
							success: (res) => {
								data.log.logPicture = JSON.parse(res.data).data
							}
						});
						uni.hideLoading()
					}
				});
				uni.hideLoading()
			}

			return {
				handMapping,
				handleChoose,
				data,
			};
		}
	}
</script>

<style>
	.box-backimage {
		width: 100%;
		background-repeat: repeat;
		background-size: 100% auto;
		background-position: 0 100%;
		position: absolute;
		height: 580px;
	}
</style>
